<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <style>
        #name {
            width: auto;
            height: 10px;
            padding: 10px;
        }

        #content {
            width: auto;
            height: 20px;
            padding: 10px;
        }
    </style>
</head>
<body>
text_name:
<input id="name" value="" placeholder="text_name"><br><br>
text_content:
<input id="content" value="" placeholder="text_content"><br><br>

<button id="button">上传数据库</button>
<br>
<br>

<table id="myTable" border="1">
    <tr>
        <td>name</td>
        <td>text</td>
        <td></td>
    </tr>
</table>

<script>
    var table = document.getElementById("myTable");

    function deleteRow(btn) {
        var row = btn.parentNode.parentNode;
        var data = row.cells[0].innerHTML;
        row.parentNode.removeChild(row);
        // console.log(data);
        $.ajax({
            type: "POST",
            url: "/deletetext",
            dataType: "json",
            data: {
                text_name: data
            },

            success: function (message) {
                console.log(message)

                console.log("提交成功");
            },
            error: function (message) {
                alert("提交失败");
            }
        });

    }

    $.ajax({
        url: '/uploadalltext',
        type: "POST",
        dataType: 'json',
        success: function (result) {
            console.log(result)
            var namelen = result["name"].length
            var name = result["name"]
            var content = result['content']

            var rowCount = table.rows.length;
            for (var k = rowCount - 1; k > 0; k--) {
                table.deleteRow(k);
            }

            for (var i in name) {
                // console.log(i)

                // console.log(name[i], content[i])
                var row = table.insertRow();

                var name_text = row.insertCell(0);
                var content_text = row.insertCell(1);
                var dele = row.insertCell(2);

                name_text.innerHTML = name[i];
                content_text.innerHTML = content[i];
                dele.innerHTML = '<button id="del_but" onclick="deleteRow(this)">删除</button>';


            }
        },
        error: function () {
            console.log('shibai')
        },
    });


    $("#button").click(function () {

        if ($("#content").val() == '') {
            alert('text_content不可为空')
        } else if ($('#name').val() == '') {
            alert('text_name不可为空')
        } else {
            $.ajax({
                url: '/uploadtext',
                type: "POST",
                dataType: 'text',
                data: {
                    text_content: $("#content").val(),
                    text_name: $('#name').val(),
                },
                success: function (result) {
                    console.log(result)
                    $.ajax({
                        url: '/uploadalltext',
                        type: "POST",
                        dataType: 'json',
                        success: function (result) {
                            // console.log(result)
                            var namelen = result["name"].length
                            var name = result["name"]
                            var content = result['content']

                            var rowCount = table.rows.length;
                            for (var i = rowCount - 1; i > 0; i--) {
                                table.deleteRow(i);
                            }

                            for (var i in name) {
                                // console.log(i)

                                // console.log(name[i], content[i])
                                var row = table.insertRow();

                                var name_text = row.insertCell(0);
                                var content_text = row.insertCell(1);
                                var dele = row.insertCell(2);

                                name_text.innerHTML = name[i];
                                content_text.innerHTML = content[i];
                                dele.innerHTML = '<button onclick="deleteRow(this)">删除</button>';

                            }
                        },
                        error: function () {
                            console.log('shibai')
                        },
                    });
                },
                error: function () {
                    console.log('shibai')
                },
            });

        }

    })

</script>
</body>
</html>